<script lang="ts">
  import * as echarts from "echarts";
  import { onMount } from "svelte";
  import Title from "../../../components/Title/Title.svelte";

  let myChart;
  let height;
  let width;
  onMount(async () => {
    // 数据数组1
    let data = [5, 20, 36, 10, 10, 20];
    // 数据数组2
    let data2 = [15, 120, 36, 20, 210, 20];
    let data3 = [35, 120, 316, 10, 110, 20];
    let data4 = [115, 120, 136, 10, 10, 20];
    let legends = [
      "分选未完成数量",
      "待分选数量",
      "预报废数量",
      "分选完成数量",
    ];
    let name = [
      "搬运机器人",
      "CNC设备",
      "打磨机器人",
      "巡检机器人",
      "焊接机器人",
      "滚筒机器人",
    ];

    myChart = echarts.init(document.getElementById("c-1"));
    const rate = Math.ceil(width / 1920);
    const color = [
      {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          { offset: 0, color: "#dc0707" },
          { offset: 0.5, color: "#dc0707" },
          { offset: 0.5, color: "#af0808" },
          { offset: 1, color: "#af0808" },
        ],
      },
      {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          { offset: 0, color: "#f67c20" },
          { offset: 0.5, color: "#f67c20" },
          { offset: 0.5, color: "#cc681e" },
          { offset: 1, color: "#cc681e" },
        ],
      },
      {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          { offset: 0, color: "#efff37" },
          { offset: 0.5, color: "#efff37" },
          { offset: 0.5, color: "#d5e700" },
          { offset: 1, color: "#d5e700" },
        ],
      },
      // [{ offset: 0, color: "#32ffee", }, { offset: 0.5, color: "#32ffee", }, { offset: 0.5, color: "#00e8d5", }, { offset: 1, color: "#00e8d5", }],
      // [{ offset: 0, color: "#46c9ff", }, { offset: 0.5, color: "#46c9ff", }, { offset: 0.5, color: "#00b4ff", }, { offset: 1, color: "#00b4ff", }],
      // [{ offset: 0, color: "#54a0ff", }, { offset: 0.5, color: "#54a0ff", }, { offset: 0.5, color: "#1f83ff", }, { offset: 1, color: "#1f83ff", }],
    ];
    let barWidth = 30;
    let constData = [];
    let constData2 = [];
    let showData = [];
    let otherData = [];
    for (let i = 0; i < data.length; i++) {
      data[i] = Number(data[i]);
      data2[i] = Number(data2[i]);
      data3[i] = Number(data3[i]);
      otherData[i] = data[i] + data2[i] + data3[i];
      constData2[i] = data[i] + data2[i];
      if (data[i] <= 0) {
        constData.push(0);
        showData.push({
          value: 1,
          itemStyle: {
            normal: {
              borderColor: "rgba(0,0,0,0)",
              borderWidth: 2,
              color: "rgba(0,0,0,0)",
            },
          },
        });
      } else {
        constData.push(1);
        if (data2[i] > 0) {
          showData.push({
            value: data[i],
            itemStyle: {
              normal: {
                borderColor: "#f67c20", // 第二个柱子底部的颜色
                borderWidth: 2,
                color: "#f67c20",
              },
            },
          });
        } else {
          showData.push({
            value: data[i],
            itemStyle: {
              normal: {
                borderColor: "#89e3ec",
                borderWidth: 2,
                color: "#89e3ec",
              },
            },
          });
        }
      }
    }
    const option = {
      title: { text: "" },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          return (
            params[0].name +
            "<br/>" +
            params[0]["marker"] +
            params[0]["seriesName"] +
            " : " +
            params[0].value +
            "<br/>" +
            params[1]["marker"] +
            params[1]["seriesName"] +
            " : " +
            params[1].value +
            "<br/>" +
            params[2]["marker"] +
            params[2]["seriesName"] +
            " : " +
            params[2].value +
            "<br/>"
          );
        },
      },
      // legend: {
      //     data: legends,
      //     selectedMode: false,
      //     bottom: 8,
      //     textStyle:{
      //         color:'#fff',
      //         fontSize:12,
      //     },
      //     itemWidth: 20,
      //     itemHeight: 8,
      // },
      grid: {
        top: "6%",
        right: "6%",
        left: "4%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: {
        axisLabel: { color: "#ffffff", fontSize: 12 * rate },
        axisLine: { show: true, lineStyle: { color: "#0a66ae" } },
        axisTick: { show: true, lineStyle: { color: "#0a66ae" } },
        splitLine: {
          show: true,
          interval: 0,
          lineStyle: { type: "dashed", color: "#0a66ae" },
        },
        data: name,
      },
      yAxis: {
        axisLabel: { color: "#ffffff", fontSize: 12 * rate },
        axisLine: { show: true, lineStyle: { color: "#0a66ae" } },
        axisTick: { show: true, lineStyle: { color: "#0a66ae" } },
        splitLine: {
          show: true,
          interval: 0,
          lineStyle: { type: "dashed", color: "#0a66ae" },
        },
      },
      series: [
        {
          z: 1,
          name: legends[0],
          type: "bar",
          barWidth: barWidth,
          stack: "total",
          color: color[0],
          data: data,
        },
        {
          z: 2,
          name: legends[1],
          type: "bar",
          barWidth: barWidth,
          stack: "total",
          color: color[1],
          data: data2,
        },
        {
          z: 3,
          name: legends[2],
          type: "bar",
          barWidth: barWidth,
          stack: "total",
          color: color[2],
          data: data3,
        },
        {
          z: 4,
          name: "项目",
          type: "pictorialBar",
          data: constData,
          symbol: "diamond",
          symbolOffset: ["0%", "50%"],
          symbolSize: [barWidth, 10],
          itemStyle: { normal: { color: color[0] } },
          tooltip: { show: false },
        },
        {
          z: 5,
          name: "项目",
          type: "pictorialBar",
          data: constData2,
          symbolPosition: "end",
          symbol: "diamond",
          symbolOffset: ["0%", "-50%"],
          symbolSize: [barWidth, 10],
          itemStyle: { normal: { color: color[2] } },
          tooltip: { show: false },
        },
        {
          z: 6,
          name: "项目",
          type: "pictorialBar",
          data: otherData,
          symbol: "diamond",
          symbolPosition: "end",
          symbolOffset: ["0%", "-50%"],
          symbolSize: [barWidth, 10],
          itemStyle: { normal: { color: color[2] } },
          tooltip: { show: false },
        },
        {
          z: 7,
          name: "项目",
          type: "pictorialBar",
          symbolPosition: "end",
          data: showData,
          symbol: "diamond",
          symbolOffset: ["0%", "-54%"],
          symbolSize: [barWidth - 2, (8 * (barWidth - 2)) / barWidth],
          tooltip: { show: false },
        },
        // {
        //   z: 8, name: "分选完成数量", type: "line", barWidth: 22, lineStyle: {width: 2 * rate},
        //   // stack: 'total',
        //   data: data4,
        // },
      ],
    };

    myChart.setOption(option);
    // autoPlay(myChart, option.series[0].data.length, 1000)
  });

  function onResize() {
    myChart.resize();
  }
</script>

<svelte:window
  bind:innerHeight={height}
  bind:innerWidth={width}
  on:resize={onResize}
/>
<div class="h-full flex flex-col">
  <Title title="设备状态趋势统计" />
  <div id="c-1" class="flex-1 w-full" />
</div>

<style>
</style>
